<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="frontend.js">
    </script>
    <style>
      body {
          margin: 0;
      }
      #container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100vw;
          height: 100vh;      
      }
      #board {
          width: 90vh;
          height: 90vh;
      }
      #board { border: 2px solid black; }      
      text { -webkit-user-select: none; }
      .piece { cursor: default; }
      .piece.selectable { cursor: pointer; }
      .element > rect {
	  stroke-width: 0.5;
	  transform: translate(-50%, -50%);
      }
      .piece > rect { stroke: black; }
      .placeholder > rect { stroke: none; fill: none; }
      .piece.red > rect { fill: url(#red); }
      .piece.purple > rect { fill: url(#purple); }
      .piece.green > rect { fill: url(#green); }
      .piece.blue > rect { fill: url(#blue); }
      .placeholder.target > rect { stroke: red; }
      .piece.target.red > rect { fill: url(#light_red); }
      .piece.target.purple > rect { fill: url(#light_purple); }
      .piece.target.green > rect { fill: url(#light_green); }
      .piece.target.blue > rect { fill: url(#light_blue); }
      .piece > text {
          font-family: sans-serif, "思源黑体 CN", "微软雅黑";
	  text-anchor: middle;
	  fill: white;
          cursor: inherit;
      }
      .element.reachable{ cursor: pointer; }
      .placeholder.reachable > rect {
          stroke: hsla(0, 0%, 0%, 0.3);
          fill: hsla(50, 95%, 50%, 0.3);
      }
      .piece.reachable > rect {
          stroke: hsl(0, 100%, 45%);
          stroke-width: 0.75;
          opacity: 0.5;
      }
      .piece.selected > rect { stroke: red; fill: hsla(30, 90%, 50%, 0.3); }
      .piece.selected > text { fill: black; }
      .button { cursor: pointer; }
      .button:hover rect { fill: hsla(0, 0%, 80%, 0.8); }
      .clock > rect {
          fill: none;
          stroke: black;
          stroke-width: 1;
          transform: translate(-50%, -50%);
      }
      .clock > text {
          cursor: default;
          -webkit-user-select: none;
          text-anchor: middle;
      }
      #panel {
          position: absolute;
          border: 2px solid black;
          background-color: hsla(0, 0%, 100%, 0.8);
          font-family: sans-serif;
          font-size: 1em;
          text-align: center;
      }
      #panel td {
          cursor: pointer;
          -wekit-user-select: none;
      }
      #arrow_path {
	  fill: url(#arrow_color);
	  stroke: black;
	  stroke-width: 0.5;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <svg id="board" viewBox="-100 -100 200 200">
	<defs>
	  <linearGradient id="red">
	    <stop offset="0%" stop-color="hsl(0, 90%, 25%)" />
	    <stop offset="100%" stop-color="hsl(0, 90%, 30%)" />
	  </linearGradient>
	  <linearGradient id="light_red">
	    <stop offset="0%" stop-color="hsl(0, 90%, 45%)" />
	    <stop offset="100%" stop-color="hsl(0, 90%, 50%)" />
	  </linearGradient>
	  <linearGradient id="purple">
	    <stop offset="0%" stop-color="hsl(275, 90%, 25%)" />
	    <stop offset="100%" stop-color="hsl(275, 90%, 30%)" />
	  </linearGradient>
	  <linearGradient id="light_purple">
	    <stop offset="0%" stop-color="hsl(275, 90%, 50%)" />
	    <stop offset="100%" stop-color="hsl(275, 90%, 55%)" />
	  </linearGradient>
	  <linearGradient id="green">
	    <stop offset="0%" stop-color="hsl(130, 90%, 25%)" />
	    <stop offset="100%" stop-color="hsl(130, 90%, 30%)" />
	  </linearGradient>
	  <linearGradient id="light_green">
	    <stop offset="0%" stop-color="hsl(130, 90%, 35%)" />
	    <stop offset="100%" stop-color="hsl(130, 90%, 40%)" />
	  </linearGradient>
	  <linearGradient id="blue">
	    <stop offset="0%" stop-color="hsl(233, 90%, 25%)" />
	    <stop offset="100%" stop-color="hsl(233, 90%, 30%)" />
	  </linearGradient>
	  <linearGradient id="light_blue">
	    <stop offset="0%" stop-color="hsl(233, 90%, 50%)" />
	    <stop offset="100%" stop-color="hsl(233, 90%, 55%)" />
	  </linearGradient>
	  <linearGradient id="arrow_color">
	    <stop offset="0%" stop-color="hsl(60, 95%, 46%)" />
	    <stop offset="100%" stop-color="hsl(60, 95%, 50%)" />
	  </linearGradient>
	  <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="translate(-5,0)">
            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="1" stroke-dasharray="1" />
	  </pattern>
	  <rect id="central_grid" width="10" height="10" fill="none" stroke="gray" stroke-width="0.5" stroke-dasharray="1" />
	  <rect id="player_grid" x="-25" y="30" width="50.2" height="60.2" fill="url(#grid)" stroke="none" />
	  <path id="arrow_path" d="M5 0v2h-5v2h5v2l3-3.03-3-2.97z" transform="translate(-4, -4) translate(0 1)"/> <!-- from open-iconic -->
	</defs>
	<use xlink:href="#central_grid" x="-5" y="-5" />
	<use xlink:href="#central_grid" x="15" y="15" />
	<use xlink:href="#central_grid" x="15" y="15" transform="rotate(90)"/>
	<use xlink:href="#central_grid" x="15" y="15" transform="rotate(180)"/>
	<use xlink:href="#central_grid" x="15" y="15" transform="rotate(270)"/>
	<use xlink:href="#central_grid" x="-5" y="15"/>
	<use xlink:href="#central_grid" x="-5" y="15" transform="rotate(90)"/>
	<use xlink:href="#central_grid" x="-5" y="15" transform="rotate(180)"/>
	<use xlink:href="#central_grid" x="-5" y="15" transform="rotate(270)"/>
	<use xlink:href="#player_grid" />
	<use xlink:href="#player_grid" transform="rotate(90)" />
	<use xlink:href="#player_grid" transform="rotate(180)" />
	<use xlink:href="#player_grid" transform="rotate(270)" />
	<g id="clock_container">
	</g>
	<g id="route_signs">
	</g>
	<g id="pieces">
	</g>
	<g id="buttons">
	  <g class="button" id="ready_button" style="display: none;">
	    <rect x="45" y="45" width="28" height="10" fill="none" stroke="black" />
	    <text x="59" y="45" dy="7" font-size="8" text-anchor="middle">Ready</text>
	  </g>
	</g>
      </svg>
      <div id="panel" style="display:none;">
	<table>
	  <tr>
	    <td class="mark_button">７</td>
	    <td class="mark_button">８</td>
	    <td class="mark_button">９</td>
	    <td class="mark_button">大</td>
	  </tr>
	  <tr>
	    <td class="mark_button">４</td>
	    <td class="mark_button">５</td>
	    <td class="mark_button">６</td>
	    <td class="mark_button">小</td>
	  </tr>
	  <tr>
	    <td class="mark_button">１</td>
	    <td class="mark_button">２</td>
	    <td class="mark_button">３</td>
	    <td class="mark_button">兵</td>
	  </tr>
	  <tr>
	    <td class="mark_button">０</td>
	    <td class="mark_button">？</td>
	    <td class="mark_button">！</td>
	    <td class="mark_button">雷</td>
	  </tr>
	  <tr>
	    <td class="clear_button" colspan="4">
	      Clear
	    </td>
	  </tr>
	</table>
      </div>	
    </div>
  </body>
</html>
